<template>
<div>
    <KDialog v-model:showDialog="upload.show">
      <template #header>
        <div style="font-size: 20px; font-family: 'Roboto Slab', serif">
          上传作业 UPLOAD
        </div>
      </template>
      <div align="center">
        <div>
          <el-scrollbar height="360px">
            <upload v-if="upload.show"
              :homeworkID="upload.homeworkID"
              :type="upload.type"
            ></upload>
          </el-scrollbar>
        </div>
      </div>
    </KDialog>

    <section>
    <br>
    <KTitle3>我参与的作业 participate</KTitle3>
    <br>
    <div v-if="joinedHomework.homework_num == 0" style="min-height: 1000px">
      <el-empty description="暂时没作业" :image-size="200"/>
    </div>    

    <div v-else style="min-height: 1100px">
      <div
          v-for="c in joinedHomework.homework"
          :key="c.ID"
      >
        <KCard style="margin: 40px; color: black">
          <template #header>
            <div style="display:flex;justify-content: space-between;}">
              <div
                class="MyFont"
                style="font-size: 22px; padding: 20px 10px 0px"
              >
              <span style="background-color:var(--mainColor);color:white;padding:8px;border-radius:.5em;">HW</span> &ensp; {{ c.Name }}
              </div>
              <div>
                <div style="display:flex;">
                    <p :class="`icon solid fa-hand-${c.CanSubmitAfterEnd ? 'peace' : 'rock'}`" 
                    :style="`font-size:15px;width: fit-content;border-radius:1.5em;color:white;padding:8px 18px;
                        margin:20px 0;
                        background-color:${c.CanSubmitAfterEnd ? '#3b5fec' : '#e59617'}`">&ensp;
                    {{ c.CanSubmitAfterEnd ? "可以延期" : "不可以延期" }}  
                    </p>
                    <p :class="`icon solid fa-${c.Finished ? 'smile' : 'frown'}`" 
                    :style="`font-size:15px;width: fit-content;border-radius:1.5em;color:white;padding:8px 18px;
                        margin:20px;
                        background-color:${c.Finished ? '#44ce40' : '#e45e9c'}`">&ensp;
                    {{ c.Finished ? "已完成" : "未完成" }}  
                    </p>
                </div>
              </div>
            </div>

            <img style="margin-left: 15px"
            :src="`https://img.shields.io/badge/Homework ID-${c.ID}-green`"
            />
            <img style="margin-left: 15px"
            :src="`https://img.shields.io/badge/DDL-${makePrettyTime(c.EndTime).split(' ')[0]}-orange`"
            />
            <img style="margin-left: 15px"
            :src="`https://img.shields.io/badge/Type-${c.Type}-blue`"
            />
          </template>
         
            
            <div style="display:flex;justify-content: space-between;">
               <div class="MyFont item-list" style="font-size: 16px; padding: 10px">
                <div class="icon solid fa-leaf">&ensp;提交类型:&ensp;{{ c.Type }}</div>

                <div class="icon solid fa-closed-captioning">
                  &ensp;作业描述:
                  {{
                    c.Desc
                      ? `「${c.Desc}」`
                      : "无"
                  }}
                </div>
                <div class="icon solid fa-object-group">
                &ensp;所属科目:&ensp;
                {{ c.Subject }}
                </div>
                <div class="icon solid fa-hourglass-start">
                  &ensp;创建时间:&ensp;
                  {{ makePrettyTime(c.CreatedAt) }}
                </div>
                <div class="icon solid fa-stopwatch">
                  &ensp;结束时间:&ensp;
                  {{ makePrettyTime(c.EndTime) }}
                </div>
                <div class="icon solid fa-object-group">
                  &ensp;创建人:&ensp;
                  {{ c.Owner.Name }}
                </div>
              </div>              
              <div style="display:flex;padding : 20px;" align="right">
                <button
                  class="button icon solid fa-download"
                  :style="`margin: auto 10px 0;cursor: ${c.Finished ? 'pointer' : 'not-allowed'}`"
                  @click="download.handle(c.ID, c.Finished)"
                >下载上一次提交</button>
                <button
                  class="button primary icon solid fa-table"
                  style="margin: auto 10px 0;"
                  @click="upload.handle(c.ID, c.Type)"
                >提交</button>
              </div>
            
          </div>
        </KCard>    
      </div>
    </div>
    
    </section>

    <section 
      v-if="joinedHomework.homework_num > 0" 
      align="center" 
      style="font-family: 'Roboto Slab', serif"
    >
      <KPagination
        v-model:cur_page="joinedHomework.cur_page"
        :total="joinedHomework.total_pages"
        @click="joinedHomework.move"
      ></KPagination>
    </section>
</div>
</template>

<script>
import { useStore } from "vuex"
import { ElNotification, ElLoading } from "element-plus"
import { reactive, computed, onMounted } from "vue"
import { makePrettyTime } from "@/hook/format"
import upload from "@/pages/MyHomeWork/upload"

export default {
    name : "MyHomeWork",
    components : {
      upload
    },
    setup() {
      setTimeout(() => {
        ElNotification({
          title : "我想说",
          message : "这做作业多是一件美事呀 ~"
        })
      }, 500)
      let store = useStore()
      
      function updateData() {
        const loading = ElLoading.service({
          lock: true,
          text: '正在拉取您的信息中...',
          background: 'rgba(0, 0, 0, 0.8)',
          customClass: "MyLoading"
        })
        store.dispatch("homeworkJoinedNum").then(function() {
          if (store.state.homework.joinedHomeworkNum) {
            let queryIndice = joinedHomework.cur_page_index
            let start = queryIndice[0];
            let end = queryIndice[queryIndice.length - 1] + 1
            // 最后一条需要在总条目之内
            end = Math.min(end, store.state.homework.joinedHomeworkNum)
            // 最后一条需要在100条请求条目之内
            end = Math.min(end, start + 100)
            store.dispatch("homeworkJoined", {start, end}).then(function() {
              loading.close()
              if (store.state.homework.joinedHomework.length > 0) {}
              else {ElNotification({title: "Oops", message: "拉取初始化列表失败，错误信息: " + store.state.error})}
            })
          }
          else {
            loading.close()
            let message
            if (store.state.homework.joinedHomework == 0) {}
            else {
              message = "初始化失败！错误信息: " + store.state.error
              ElNotification({title: "Oops", message: message})
            }
            return
          }
        })
      }
      
      onMounted(updateData)

      let joinedHomework = reactive({
        item_num : 10,
        homework: computed(() => store.state.homework.joinedHomework),
        homework_num: computed(() => store.state.homework.joinedHomeworkNum),
        total_pages: computed(() => Math.ceil(joinedHomework.homework_num / joinedHomework.item_num)),
        cur_page : 1,
        last_page : undefined,
        cur_page_index: computed(() => {
          let indexes = [], start = (joinedHomework.cur_page - 1) * joinedHomework.item_num;
          for (let i = start; i < Math.min(start + joinedHomework.item_num, joinedHomework.homework_num); ++ i) {
            indexes.push(i);
          }
          return indexes;
        }),
        move() {
          if ( joinedHomework.last_page != joinedHomework.cur_page)
            updateData()
          joinedHomework.last_page = joinedHomework.cur_page
        }
      })


      let upload = reactive({
        show : false,
        homeworkID : undefined,
        type : undefined,
        handle(homeworkID, type) {
          upload.homeworkID = homeworkID
          upload.type = type
          upload.show = true
        }
      })


      let download = reactive({
        homeworkID : undefined,
        handle(homeworkID, finish) {
          if (!finish) {
            ElNotification({title: "Wrong!", message: "你还未提交过，无法下载未来的副本"})
            return
          }
          homeworkID = parseInt(homeworkID)
          store.dispatch("getFileHomeworkID", {homeworkID}).then(() => {})
        }
      })

      return {
        joinedHomework,
        makePrettyTime,
        upload,
        download
      }
    }
}
</script>

<style>
.item-list div {
  padding : 1px 10px 15px;
  line-height: 10px;
  margin: 1px 10px 12px;
  font-size:16px;
  font-family: "Roboto Slab";
}
</style>